<div ng-controller="BudgetCtrl as vm">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-warning">
                <div class="box-header with-border">
                    <h3 class="box-title">Training Budget & Hotel Staff Average Training Hour Status</h3>
                    <small class="text-warning">{{vm.msg}}</small>
                    <button ng-disabled="!vm.editable|| vm.loading" class="btn btn-danger btn-xs pull-right" ng-click="vm.saveTable()"><i class="fa fa-check-square-o"></i>Submit</button>
                </div>
                <div class="box-body table-responsive no-padding">
                    <table class="table table-hover">
                        <form class="form-inline">
                            <table class="table table-bordered table-condensed">
                                <tr>
                                    <th>Annual Training Budget (RMB)</th>
                                    <th>Cost Incurred (RMB)(MTD)</th>
                                    <th>Cost/ Hotel Annual Training Budget (%)(MTD)</th>
                                    <th>Cost Incurred (RMB) (YTD)</th>
                                    <th>Cost/ Hotel Annual Training Budget (%) (YTD)</th>
                                    <th>Hotel Staff Average Training Hour (Hrs) (MTD)</th>
                                    <th>Hotel Staff Average Training Hour (Hrs) (YTD)</th>
                                </tr>
                                <tr>
                                    <td ng-class="{'has-error': vm.annual}">
                                        <input type="text" class="form-control" ng-disabled="!vm.editable" ng-model="vm.budget.annual" ng-change="vm.calculate()"/>
                                        <p class="help-block" ng-show="vm.annual">This field is required.</p>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" ng-disabled="!vm.editable"  ng-model="vm.budget.costmtd" ng-change="vm.calculate()" />
                                    </td>
                                    <td>
                                        {{vm.budget.costmtdp | percentage}}
                                    </td>
                                    <td>
                                        {{vm.budget.costytd}}
                                    </td>
                                    <td>
                                        {{vm.budget.costytdp | percentage}}
                                    </td>
                                    <td>
                                        <input type="text" class="form-control" ng-disabled="!vm.editable"  ng-model="vm.budget.hourmtd" ng-change="vm.calculate()" />
                                    </td>
                                    <td>
                                        {{vm.budget.hourytd}}
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>
</div>
